<template>
  <div>
    <div style="margin: 10px 0;">
      <el-select v-model="searchRoles" placeholder="请选择角色类别">
        <el-option label="所有" value="" @click="checkRoles()"></el-option>
        <el-option label="管理员" value="管理员" @click="checkRoles()"></el-option>
        <el-option label="老师" value="老师" @click="checkRoles()"></el-option>
        <el-option label="研究生" value="研究生" @click="checkRoles()"></el-option>
      </el-select>
      <el-input v-model="searchName" placeholder="按名搜索" style=" width: 20%;" clearable></el-input>
      <el-button style="margin-left:5px ;" @click="checkRoles()">
        <el-icon>
          <search/>
        </el-icon>
        <span style="margin-left: 5px;">查询</span>
      </el-button>
      <el-button type="primary" style="margin-left:30px ;" @click="addAccountView()">新增人员及账号
      </el-button>
      <el-button type="primary" @click="dialogExcel = true">导入人员及账号</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" sortable/>
      <el-table-column prop="accounts" label="账号"/>
      <el-table-column prop="userName" label="姓名"/>

      <el-table-column prop="passwords" label="密码"/>
      <!-- <el-table-column prop="roles" label="角色" v-if="false" /> -->
      <el-table-column label="角色">
        <template #default="scope">
          <el-tag vclass="ml-2" v-if="scope.row.roles == '管理员'">{{ scope.row.roles }}</el-tag>
          <el-tag vclass="ml-2" type="success" v-else>{{ scope.row.roles }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="users" label="信息" v-if="false"/> -->
      <el-table-column label="管理人员信息">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">人员信息</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="handleEditAccount(scope.row)">修改账号</el-button>
          <el-button type="text" @click="handleEditPassword(scope.row)">修改密码</el-button>

        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="demo-pagination-block">
    <div style="float: right;">
      <el-pagination :currentPage="currentPage" :page-sizes="[10, 20, 30]" :page-size=pageSize
                     layout="sizes, prev, pager, next,total,jumper" :total=total @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>


  <el-dialog v-model="centerDialogVisible" title="人员信息" width="30%" center>
    <el-form ref="user" :model="user" :rules="rules" label-width="150px" class="demo-user">
      <el-input v-model="user.id" v-if="false"/>
      <el-input v-model="user.accountId" v-if="false"/>
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="user.userName" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-select v-model="user.sex" placeholder="性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="民族">
        <el-select v-model="user.nation" placeholder="请选择民族">
          <el-option label="汉族" value="汉族"></el-option>
          <el-option label="蒙古族" value="蒙古族"></el-option>
          <el-option label="回族" value="回族"></el-option>
          <el-option label="藏族" value="藏族"></el-option>
          <el-option label="维吾尔族" value="维吾尔族"></el-option>
          <el-option label="苗族" value="苗族"></el-option>
          <el-option label="彝族" value="彝族"></el-option>
          <el-option label="壮族" value="壮族"></el-option>
          <el-option label="布依族" value="布依族"></el-option>
          <el-option label="朝鲜族" value="朝鲜族"></el-option>
          <el-option label="满族" value="满族"></el-option>
          <el-option label="侗族" value="侗族"></el-option>
          <el-option label="瑶族" value="瑶族"></el-option>
          <el-option label="白族" value="白族"></el-option>
          <el-option label="土家族" value="土家族"></el-option>
          <el-option label="哈尼族" value="哈尼族"></el-option>
          <el-option label="哈萨克族" value="哈萨克族"></el-option>
          <el-option label="傣族" value="傣族"></el-option>
          <el-option label="黎族" value="黎族"></el-option>
          <el-option label="僳僳族" value="僳僳族"></el-option>
          <el-option label="佤族" value="佤族"></el-option>
          <el-option label="畲族" value="畲族"></el-option>
          <el-option label="高山族" value="高山族"></el-option>
          <el-option label="拉祜族" value="拉祜族"></el-option>
          <el-option label="水族" value="水族"></el-option>
          <el-option label="东乡族" value="东乡族"></el-option>
          <el-option label="纳西族" value="纳西族"></el-option>
          <el-option label="景颇族" value="景颇族"></el-option>
          <el-option label="柯尔克孜族" value="柯尔克孜族"></el-option>
          <el-option label="土族" value="土族"></el-option>
          <el-option label="达斡尔族" value="达斡尔族"></el-option>
          <el-option label="仫佬族" value="仫佬族"></el-option>
          <el-option label="羌族" value="羌族"></el-option>
          <el-option label="布朗族" value="布朗族"></el-option>
          <el-option label="撒拉族" value="撒拉族"></el-option>
          <el-option label="毛南族" value="毛南族"></el-option>
          <el-option label="仡佬族" value="仡佬族"></el-option>
          <el-option label="锡伯族" value="锡伯族"></el-option>
          <el-option label="阿昌族" value="阿昌族"></el-option>
          <el-option label="普米族" value="普米族"></el-option>
          <el-option label="塔吉克族" value="塔吉克族"></el-option>
          <el-option label="怒族" value="怒族"></el-option>
          <el-option label="乌孜别克族" value="乌孜别克族"></el-option>
          <el-option label="俄罗斯族" value="俄罗斯族"></el-option>
          <el-option label="鄂温克族" value="鄂温克族"></el-option>
          <el-option label="德昂族" value="德昂族"></el-option>
          <el-option label="保安族" value="保安族"></el-option>
          <el-option label="裕固族" value="裕固族"></el-option>
          <el-option label="京族" value="京族"></el-option>
          <el-option label="塔塔尔族" value="塔塔尔族"></el-option>
          <el-option label="独龙族" value="独龙族"></el-option>
          <el-option label="鄂伦春族" value="鄂伦春族"></el-option>
          <el-option label="赫哲族" value="赫哲族"></el-option>
          <el-option label="门巴族" value="门巴族"></el-option>
          <el-option label="珞巴族" value="珞巴族"></el-option>
          <el-option label="基诺族" value="基诺族"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="出生日期" required>
        <el-col :span="11">
          <el-form-item prop="dateOfBirth">
            <el-date-picker v-model="user.dateOfBirth" type="date" placeholder="选择日期" style="width: 100%">
              >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="最高学位" prop="education">
        <el-select v-model="user.education" placeholder="学位">
          <el-option label="博士" value="博士"></el-option>
          <el-option label="硕士" value="硕士"></el-option>
          <el-option label="学士" value="学士"></el-option>
          <el-option label="无" value="无" @click="changeTime()"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="学位授予时间">
        <el-col :span="11">
          <el-form-item prop="degreeGrantingTime">
            <el-date-picker v-model="user.degreeGrantingTime" type="date" placeholder="选择日期"
                            style="width: 100%" v-if="user.education == '无' || user.education == null" disabled>
            </el-date-picker>
            <el-date-picker v-model="user.degreeGrantingTime" type="date" placeholder="选择日期"
                            style="width: 100%" v-else></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="最高学历" prop="degree">
        <el-select v-model="user.degree" placeholder="学历">
          <el-option label="博士研究生" value="博士研究生" v-if="user.education == '博士'"></el-option>
          <el-option label="硕士研究生" value="硕士研究生" v-if="user.education =='硕士'||user.education == '博士'"></el-option>
          <el-option label="研究生班" value="研究生班" v-if="user.education =='硕士'"></el-option>
          <el-option label="大学本科" value="大学本科" v-if="user.education == '学士'"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="人员类别" prop="personnelCategory">
        <el-select v-model="user.personnelCategory" placeholder="请选择人员类别">
          <el-option label="本校在岗教师" value="本校在岗教师"></el-option>
          <el-option label="已退休教师" value="已退休教师"></el-option>
          <el-option label="在读研究生" value="在读研究生" v-if="user.education != '博士'"></el-option>
          <el-option label="柔性引进" value="柔性引进"></el-option>
          <el-option label="已调离人员" value="已调离人员"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="手机号码" prop="phoneNumber">
        <el-input v-model="user.phoneNumber" placeholder="请输入手机号码"></el-input>
      </el-form-item>

      <el-form-item label="电子邮箱" prop="mail">
        <el-input v-model="user.mail" placeholder="请输入电子邮箱"></el-input>
      </el-form-item>


      <el-form-item label="政治面貌" prop="politicalOutlook">
        <el-select v-model="user.politicalOutlook" placeholder="请选择政治面貌">
          <el-option label="中共党员" value="中共党员"></el-option>
          <el-option label="中共预备党员" value="中共预备党员"></el-option>
          <el-option label="共青团员" value="共青团员"></el-option>
          <el-option label="民革党员" value="民革党员"></el-option>
          <el-option label="民建会员" value="民建会员"></el-option>
          <el-option label="民进会员" value="民进会员"></el-option>
          <el-option label="农工党党员" value="农工党党员"></el-option>
          <el-option label="致公党党员" value="致公党党员"></el-option>
          <el-option label="九三学社社员" value="九三学社社员"></el-option>
          <el-option label="台盟盟员" value="台盟盟员"></el-option>
          <el-option label="无党派人士" value="无党派人士"></el-option>
          <el-option label="群众" value="群众"></el-option>
          <el-option label="民盟盟员" value="民盟盟员"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否是高层次人才">
        <el-radio-group v-model="highLevelTalents">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('user')">保存设置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog v-model="dialogTableVisible" title="修改密码" width="30%" center>
    <el-form ref="account" :model="account" label-width="150px" class="demo-user">
      <el-input v-model="account.accounts" v-if="false"/>
      <el-input v-model="account.id" v-if="false"/>
      <el-input v-model="account.roles" v-if="false"/>
      <el-form-item label="密码" prop="passwords">
        <el-input v-model="account.passwords" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitUpdatePassword('account')">保存修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog v-model="dialogAccountVisible" title="修改账号" width="30%" center>
    <el-form ref="account" :model="account" label-width="150px" class="demo-user">
      <el-input v-model="account.passwords" v-if="false"/>
      <el-input v-model="account.id" v-if="false"/>
      <el-input v-model="account.roles" v-if="false"/>
      <el-form-item label="账号" prop="account">
        <el-input v-model="account.accounts" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitUpdatePassword('account')">保存修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog v-model="dialogaddAccountVisible" title="增加用户账号" width="30%" center>
    <el-form ref="addAccount" :model="addAccount" :rules="rules" label-width="150px" class="demo-user">
      <el-form-item label="账号" required>
        <el-input v-model="addAccount.accounts" placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item label="密码" required>
        <el-input v-model="addAccount.passwords" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="roles">
        <el-select v-model="addAccount.roles" placeholder="请选择角色类别">
          <el-option label="管理员" value="管理员"></el-option>
          <el-option label="老师" value="老师"></el-option>
          <el-option label="研究生" value="研究生"></el-option>
        </el-select>
      </el-form-item>
      <el-divider style="border-width: 3px;"></el-divider>
      <el-form-item label="姓名" required>
        <el-input v-model="addAccount.users.userName" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="addAccount.users.sex" placeholder="性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitAddUser('addAccount')">增加</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog v-model="dialogExcel" title="增加用户账号" width="30%" center>
    <div style="text-align: center;">
      <el-button type="success" @click="getExcelType">下载Excel模板</el-button>
      <el-divider style="border-width: 3px;"></el-divider>

      <el-upload class="upload-demo" drag ref="upload" action="#"
                 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" :http-request="uploadFile">
        <el-icon class="el-icon--upload">
          <upload-filled/>
        </el-icon>
        <div class="el-upload__text">
          拖放文件 <em>上传文件</em>
        </div>
      </el-upload>
    </div>
  </el-dialog>
</template>

<script>
import {
  ref,
  reactive,
  computed,
  watch
} from 'vue';
import request from '@/utils/request';
import {
  UploadFilled
} from '@element-plus/icons-vue'
import {
  ElMessage
} from 'element-plus'

export default {
  name: 'adminInformation',
  // 有BUG如果用Vue3的reactive修饰user对象的话不好在上面进行修饰，所以采用的是Vue2的形式
  data() {
    var validateDate = (rule, value, callback) => {
      if (value == '' || value == null) {
        callback();
      } else if (Date.parse(this.user.dateOfBirth) >= Date.parse(value)) {
        callback(new Error('违法的学位授予时间!'));
      } else {
        callback();
      }
    };

    var validatemail = (rule, value, callback) => {
      var emreg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
      if (value == '' || value == null) {
        callback();
      } else if (!emreg.test(value)) {
        callback(new Error('违法的邮箱地址!'));
      } else {
        callback();
      }
    };
    return {
      highLevelTalents: '',
      user: {
        id: 0,
        userName: '',
        sex: '',
        nation: '',
        dateOfBirth: '',
        education: '',
        degreeGrantingTim: '',
        degree: '',
        personnelCategory: '',
        phoneNumber: '',
        mail: '',
        politicalOutlook: '',
        highLevelTalents: '',
        accountId: 0,
      },
      account: {
        id: '',
        accounts: '',
        passwords: '',
        roles: '',
      },
      tableData: [],
      addAccount: {
        accounts: '',
        passwords: '',
        roles: '',
        users: {
          userName: '',
          sex: '',
        }
      },
      rules: {
        userName: [{
          required: true,
          message: '请输入您正确的名字',
          trigger: 'blur',
        },
          {
            min: 2,
            message: '请输入您正确的名字',
            trigger: 'blur',
          },
        ],
        roles: [{
          required: true,
          message: '请选择角色',
          trigger: 'change',
        },],
        sex: [{
          required: true,
          message: '请选择性别',
          trigger: 'change',
        },],
        dateOfBirth: [{
          type: 'date',
          required: true,
          message: '请选择出生日期',
          trigger: 'change',
        },],
        degreeGrantingTime: [{
          type: 'date',
        },
          {
            validator: validateDate,
            trigger: 'change',
          }
        ],
        education: [{
          required: true,
          message: '请选择学位',
          trigger: 'change',
        }],
        degree: [{
          required: true,
          message: '请选择学历',
          trigger: 'change',
        }],
        personnelCategory: [{
          required: true,
          message: '请选择人员类别',
          trigger: 'change',
        },],
        phoneNumber: [{
          required: true,
          message: '请输入您的手机号码',
          trigger: 'blur',
        }, {
          min: 11,
          max: 11,
          message: '手机号码位数不对',
          trigger: 'blur',
        }],
        politicalOutlook: [{
          required: true,
          message: '请选择您的政治面貌',
          trigger: 'change',
        }],
        mail: [{
          validator: validatemail,
          trigger: 'blur',
        }],
      },
    }
  },

  setup() {
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    // 不清楚为什么在这2个函数里面用不了this this对象变成了未定义 优化不来回退VUE2的方法
    // const handleSizeChange = (pageSize) => {
    //   this.pageSize = pageSize;
    //   load();
    // }
    // function handleSizeChange(pageSize){
    //     console.log(this);
    //     console.log(pageSize);
    // }
    // const handleCurrentChange = (currentPage) => {
    //  this.currentPage = currentPage;
    //  this.load();
    // }

    function load() {
      request({
        url: '/accounts/information',
        headers: {
          isToken: true
        },
        timeout: 20000,
        method: 'get',
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          searchName: this.searchName,
          searchRoles: this.searchRoles
        }
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.account;
      })
    };
    const centerDialogVisible = ref(false);


    function submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.highLevelTalents == '是') this.user.highLevelTalents = true;
          else this.user.highLevelTalents = false;
          request({
            url: '/user/admin',
            headers: {
              isToken: false
            },
            method: 'post',
            timeout: 20000,
            data: this.user
          }).then(() => {
            this.centerDialogVisible = false;
            ElMessage({
              showClose: true,
              message: '修改成功',
              center: true,
              type: 'success'
            })
            this.load();

          });
        } else {
          console.log('error submit!!')
          return false
        }
      })
    };
    const dialogTableVisible = ref(false);

    function handleEditPassword(row) {
      this.dialogTableVisible = true;
      this.account.id = row.id;
      this.account.accounts = row.accounts;
      this.account.roles = row.roles;
      this.account.passwords = row.passwords;
    }

    const dialogAccountVisible = ref(false);

    function handleEditAccount(row) {
      this.dialogAccountVisible = true;
      this.account.id = row.id;
      this.account.passwords = row.passwords;
      this.account.roles = row.roles;
      this.account.accounts = row.accounts;
    }

    function submitUpdatePassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request({
            url: '/accounts',
            headers: {
              isToken: false
            },
            method: 'put',
            timeout: 20000,
            data: this.account
          }).then(() => {
            this.dialogTableVisible = false;
            this.dialogAccountVisible = false;
            ElMessage({
              showClose: true,
              message: '修改成功',
              center: true,
              type: 'success'
            })
            this.load();
          });
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

    const dialogaddAccountVisible = ref(false);

    function submitAddUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request({
            url: '/accounts/addAccountUser',
            headers: {
              isToken: false
            },
            method: 'post',
            timeout: 20000,
            data: this.addAccount

          }).then(() => {
            this.dialogaddAccountVisible = false;
            ElMessage({
              showClose: true,
              message: '添加成功',
              center: true,
              type: 'success'
            })
            this.load();
            this.addAccount.accounts = '';
            this.addAccount.passwords = '';
            this.addAccount.roles = '';
            this.addAccount.users.userName = '';
            this.addAccount.users.sex = ''
          });
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

    const dialogExcel = ref(false);
    // 这2个搜索字段为什么不用类因为get不导其他包很难传 需要到qs然后序列化
    const searchName = ref('');
    const searchRoles = ref('');


    function getExcelType() {
      request({
        url: '/static/excel/accountType.xlsx?time=' + new Date().getTime(),
        headers: {
          isToken: false
        },
        method: 'get',
        timeout: 20000,
        responseType: 'blob',
      }).then((res) => {
        let blob = new Blob([res.data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        let fileName = "导入用户模板" + '.xlsx'
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          // console.log(3)
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          //释放内存
          window.URL.revokeObjectURL(link.href)
        }
      });
    }

    // const uploadFile = (params) =>{
    //     const formData = new FormData();
    //     formData.append("file", params.file);
    //     const config = {headers: {
    //           "Content-Type": "multipart/form-data",
    //           isToken: false
    //         }};
    //     // 回调用不了this 不清楚他的this是post的对象
    //     request.post('/accounts/addExcel',formData,config).then(()=>{
    //         location.reload();
    //     });

    // }
    // function uploadFile(params){
    //     const formData = new FormData();
    //     formData.append("file", params.file);
    //     const config = {headers: {
    //           "Content-Type": "multipart/form-data",
    //           isToken: false
    //         }};
    //     // 回调用不了this 不清楚他的this是post的对象
    //     request.post('/accounts/addExcel',formData,config).then(() => {

    //     });
    //     this.dialogExcel = false;
    //     this.load();
    //     // request({
    //     //     url: '/accounts/addExcel',
    //     //     headers: {
    //     //       "Content-Type": "multipart/form-data",
    //     //       isToken: false
    //     //     },
    //     //     method: 'post',
    //     //     timeout: 20000,
    //     //     data:this.formData
    //     //   }).then(() => {
    //     //     this.dialogExcel = false;
    //     //     this.load();
    //     // });
    // }
    return {
      searchName,
      searchRoles,
      currentPage,
      pageSize,
      load,
      centerDialogVisible,
      total,
      submitForm,
      dialogTableVisible,
      handleEditPassword,
      submitUpdatePassword,
      dialogaddAccountVisible,
      submitAddUser,
      dialogExcel,
      getExcelType,
      UploadFilled,
      dialogAccountVisible,
      handleEditAccount
    };
  },
  created() {
    this.load();
  },
  methods: {
     handleEdit(row) {
      this.user = row.users;
      if (this.user.highLevelTalents) this.highLevelTalents = '是';
      else this.highLevelTalents = '否'
      console.log(this.user)
      this.centerDialogVisible = true;
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      this.load();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.load();
    },
    checkRoles() {
      this.currentPage = 1;
      this.load();
    },
    uploadFile(params) {
      const formData = new FormData();
      formData.append("file", params.file);
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
          isToken: false
        }
      };
      request.post('/accounts/addExcel', formData, config).then(() => {
        this.$refs['upload'].clearFiles('ready');
        this.load();
        ElMessage({
          showClose: true,
          message: '添加成功，如果账号存在则不能填加，出现冲突请联系管理员',
          center: true,
          type: 'success'
        })
        this.dialogExcel = false;
      }).catch(() => {
        this.$refs['upload'].clearFiles('ready');
      });

    },
    changeTime() {
      this.user.degreeGrantingTime = '';
    },
    addAccountView() {
      this.dialogaddAccountVisible = true;
      this.addAccount.accounts = ''
      this.addAccount.passwords = ''
      this.addAccount.roles = ''
      this.addAccount.users.userName = ''
      this.addAccount.users.sex = ''
    }
  }
}
</script>

<style scoped>
.demo-pagination-block {
  margin-top: 20px;
}
</style>
